<template>
  <div>
    <dtDialog
      title="配置自动策略"
      :visible.sync="automaticTaskVisible"
      :is-loading="loading"
      @closeDialog="handleCancel"
      @comfirmBtn="onSubmit"
    >
      <el-form
        ref="automaticTaskForm"
        slot="content"
        :rules="automaticTaskRules"
        :model="automaticTaskTemp"
        label-position="right"
        label-width="110px"
        style="width: 100%;overflow-x: auto;"
      >
        <el-form-item label="同步应用" prop="appId">
          <el-select v-model="automaticTaskTemp.appId" placeholder="请选择" style="width: 100%;"
                     filterable>
            <el-option v-for="item in appList" :key="item.appId" :label="item.appName"
                       :value="item.appId" />
          </el-select>
        </el-form-item>
        <el-form-item label="推送方式" prop="syncStratey">
          <el-radio-group v-model="automaticTaskTemp.syncStratey">
            <el-radio :label="2">API</el-radio>
            <el-radio :label="1">MQ</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="同步信息类型" prop="dataTypes">
          <!-- <el-radio-group v-model="automaticTaskTemp.dataType">
            <el-radio
              v-for="dict in dict.type.dataType"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group> -->
          <el-checkbox-group v-model="automaticTaskTemp.dataTypes">
            <el-checkbox
              v-for="dict in dict.type.dataType"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="同步频次" prop="time">
          <div style="display:flex">
            <span>每</span>
            <el-input v-model.number="automaticTaskTemp.timeValue" style="width:80px;margin-left:10px" type="number" />
            <el-select v-model="automaticTaskTemp.timeUnit" style="width:120px;margin-left:10px">
              <el-option label="分钟" :value="1" />
              <el-option label="天" :value="2" />
            </el-select>
            <el-time-select
              v-if="automaticTaskTemp.timeUnit == 2"
              v-model="automaticTaskTemp.clock"
              :picker-options="{
                start: '00:00',
                step: '00:60',
                end: '23:00'
              }"
              style="width:120px;margin-left:10px"
            />
            <span style="margin-left:10px">同步一次</span>
          </div>
          <!-- <p>若设置为每xx分钟同步一次，任务首次执行从自动策略保存成功开始。</p>
          <p>若设置为每xx天xx:xx同步一次，任务首次执行从最近一次时间点开始。</p> -->
        </el-form-item>
      </el-form>
    </dtDialog>
  </div>
</template>
<script>
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'
// import selectApp from '@/framework/views/system/clientManage/components/selectApp.vue'
export default {
  // components: { selectApp },
  dicts: ['dataType'],
  data() {
    return {
      loading: false,
      automaticTaskVisible: false,
      automaticTaskTemp: {
        clock: '',
        timeValue: '',
        timeUnit: '',
        appId: '',
        dataTypes: [],
        syncStratey: 2
      },
      appList: [],
      automaticTaskRules: {
        time: [{
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!this.automaticTaskTemp.timeValue || !this.automaticTaskTemp.timeUnit) {
              callback(new Error('请输入同步频次'))
            } else if (this.automaticTaskTemp.timeUnit == 2 && !this.automaticTaskTemp.clock) {
              callback(new Error('请输入同步频次'))
            } else {
              callback()
            }
          }
        }],
        appId: [{
          required: true, message: '请选择同步应用', trigger: 'change'
        }],
        dataTypes: [{
          required: true, message: '请选择同步信息类型', trigger: 'change'
        }],
        syncStratey: [{
          required: true, message: '请选择推送方式', trigger: 'blur'
        }]
      },
      provider: dataSynchronizationApi.dataSyncApps,
      selectAppData: [],
      isDisabled: false
    }
  },
  methods: {
    // 获取同步应用
    getAppList() {
      dataSynchronizationApi.dataSyncApps().then((res) => {
        this.appList = res.data
      })
    },
    // 打开选应用弹窗
    openAppDialog() {
      this.$refs.selectAppRef.openSelect(this.selectAppData)
    },
    openDialog(row, type) {
      this.automaticTaskVisible = true
      this.getAppList()
      if (type == 'add') {
        this.handleCancel()
      } else {
        this.automaticTaskTemp = Object.assign({}, row)
        this.automaticTaskTemp.dataTypes = row.dataTypes.split(',')
        // var sysApp = []
        // sysApp.push(row.sysApp)
        // this.selectAppData = sysApp
        // this.automaticTaskTemp.appId = this.selectAppData.map(res => {
        //   return res.appId
        // }).join('')
      }
    },
    handleCancel() {
      this.automaticTaskTemp = {
        clock: '',
        timeValue: '',
        timeUnit: '',
        appId: '',
        dataTypes: [],
        syncStratey: 2
      }
      this.resetForm('automaticTaskForm')
      this.selectAppData = []
    },
    // 创建请求
    async onSubmit() {
      if (this.automaticTaskTemp.timeUnit == 1) {
        this.automaticTaskTemp.clock = '00:00'
      }
      this.$refs['automaticTaskForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          dataSynchronizationApi.configDataAutoSyncStrategy({ ...this.automaticTaskTemp, dataTypes: this.automaticTaskTemp.dataTypes.join(',') }).then((res) => {
            if (res.success) {
              this.$dtMessage({
                title: '成功',
                message: '配置成功',
                type: 'success',
                duration: 2000
              })
              this.$parent.getList()
              this.automaticTaskVisible = false
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    saveData(appIds, selectData) {
      this.showScreenLoading()
      this.selectAppData = selectData
      this.automaticTaskTemp.appId = appIds
      this.$refs.selectAppRef.cancel()
      this.hideScreenLoading()
    }
  }
}
</script>
<style lang="scss" scoped>
  .msg_error.el-form-item__error{
    padding-left: 20px;
    z-index: 100;
    margin-top: 8px;
  }
  .msg_error{
    ::v-deep .el-input__inner{
      border-color: #F56C6C;
    }
  }
    .select-person-click{
    border: 1px #c0c4cc solid;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    height:100%;
    padding: 0px 8px 0 8px;
    margin: auto;
    min-height: 36px;
    > div{
      margin: auto;
    }
    .el-tag {
      margin-right: 5px;
      margin-bottom: 4px;
    }
  }
  .plactext{
    color: #DCDFE6;
  }
  .isDisabled{
  display: flex;
  align-items: center !important;
  margin: 8px 0 0 14px;
  cursor:not-allowed;
  justify-content: space-between;
  color: #909399 !important;
  .cancle{
  pointer-events: none;
}
}
</style>
